import { AuthRoute } from '@/components/AuthRoute'
import Layout from '../page/Layout'
import Login from '../page/Login'
import { createBrowserRouter } from 'react-router-dom'
// import Home from '@/page/Home'
// import Article from '@/page/Article'
// import Publish from '@/page/Publish'
import { lazy } from 'react'
import { Suspense } from 'react'
const Home = lazy(() => import('@/page/Home/index.jsx'))
const Article = lazy(() => import('@/page/Article'))
const Publish = lazy(() => import('@/page/Publish'))

const routerConfig = [
  {
    path: '/',
    element: (
      <AuthRoute>
        <Layout />
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        )
      },
      {
        path: 'article',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Article />
          </Suspense>
        )
      },
      {
        path: 'publish',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Publish />
          </Suspense>
        )
      }
    ]
  },
  {
    path: '/login',
    element: <Login />
  }
]

const router = createBrowserRouter(routerConfig)

export default router
